import "./index.scss";
import gou from "./assets/gou.png";
import gouActive from "./assets/gou_active.png";
import { Input } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useState } from "react";
import {
	getTopicList,
	selectActiveTopic,
	selectTopicList,
	setActiveTopicId,
} from "@/store/slice/subject";
import { useAppDispatch } from "@/app/hooks";
import { useParams } from "react-router-dom";
import { topicBody } from "@/util/request";
const { TextArea } = Input;

function Exam() {
	const dispatch = useAppDispatch();
	const { exam_id } = useParams();
	const { _id, title, dec } = useSelector(selectActiveTopic);
	const data = useSelector(selectTopicList);

	function handleSelectTitle(item: topicBody) {
		dispatch(setActiveTopicId(item));
	}

	useEffect(() => {
		dispatch(getTopicList(exam_id as string));
	}, []);
	return (
		<div className="exam_wrap">
			<div className="exam_wrap_left">
				<div className="exam_wrap_left_title">考题列表</div>
				<div className="exam_wrap_left_list">
					{data.map((item: topicBody, index: number) => {
						return (
							<div className="exam_wrap_left_list_item" key={item._id}>
								<span
									className={_id === item._id ? "active" : ""}
									onClick={() => handleSelectTitle(item)}
								>
									{index + 1}丶{item.title}
								</span>
								<img src={gou} alt="" />
							</div>
						);
					})}
				</div>
			</div>
			<div className="exam_wrap_right">
				<div className="exam_wrap_left_title">题目详情</div>
				<div className="exam_wrap_right_back">返回</div>
				<div className="exam_wrap_right_title">{title}</div>
				<div className="exam_wrap_right_dec">{dec}</div>
				<div className="line"></div>
				<div className="exam_wrap_left_title">作答区域</div>
				<TextArea placeholder="请输入答案" autoSize></TextArea>
				<div className="btn">
					<div className="btn_save">保存作答</div>
					<div className="btn_submit disabled">点击交卷</div>
				</div>
				<div className="tip">注意:所有考题均保存作答后才可以点击交卷</div>
			</div>
		</div>
	);
}

export default Exam;
